<!-- 医院人员 -->
<template>
  <div class="main-content-container">
    <div ref="search" class="app-search">
      <el-row>
        <el-col :span="12" class="searchInput">
          <el-input v-model="custQuery" style="width:50%" placeholder="姓名、手机号、编号" clearable class="input-with-select" @change="getList">
            <el-button slot="append" icon="el-icon-search" @click="getList" />
          </el-input>
        </el-col>
        <el-col :span="12" align="right" class="addBtnStyle">
          <el-button @click="handleAdd(true)">
            +增加人员
          </el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px">
        <el-form ref="searchFormRef" :model="searchForm" label-width="80px" :inline="true">
          <el-form-item>
            <el-cascader
              :options="getAllDeptTreeList"
              :props="propsOption"
              placeholder="请选择所属部门"
              class="el-select-y"
              clearable
            />
            <!-- <el-select v-model="searchForm.deptUsrListHandle" clearable placeholder="请选择所属部门" class="el-select-y" @change="getList">
              <el-option v-for="item in getAllDeptTreeList" :key="item.id" :label="item.deptName" :value="item.deptName" />
            </el-select> -->
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchForm.sex" clearable placeholder="请选择性别" class="el-select-y" @change="getList">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <!-- <el-cascader
              :options="getAllJobTreeList"
              :props="propsOptions"
              placeholder="请选择岗位"
              class="el-select-y"
              clearable
            /> -->
            <el-select v-model="searchForm.usrJobListHandle" clearable placeholder="请选择岗位" class="el-select-y" @change="getList">
              <el-option v-for="item in getAllJobTreeList" :key="item.id" :label="item.jobName" :value="item.jobName" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchForm.status" clearable placeholder="请选择状态" class="el-select-y" @change="getList">
              <el-option label="在职" value="在职" />
              <el-option label="离职" value="离职" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
    <div class="box-show marginTop" :style="'height:'+ (innerHeight + 80) + 'px'">
      <el-table v-loading="loading" :data="tableData" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="编号" prop="no" show-overflow-tooltip />
        <el-table-column label="姓名" prop="usrName" show-overflow-tooltip />
        <!-- <el-table-column label="头像" prop="image" show-overflow-tooltip /> -->
        <el-table-column label="手机号" prop="phone" show-overflow-tooltip />
        <el-table-column label="性别" prop="sex" show-overflow-tooltip />
        <el-table-column label="部门" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>{{ row.deptUsrList | deptUsrListHandle }}</span>
          </template>
        </el-table-column>
        <el-table-column label="岗位" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>{{ row.usrJobList | usrJobListHandle }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" show-overflow-tooltip />
        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <el-button v-if="!row.account" type="text" @click="account(row)">开户</el-button>
            <el-button type="text" @click="handleEdit(row)">编辑</el-button>
            <el-button slot="reference" type="text" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="queryParams.page" :page-size="queryParams.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <Dialog :visible.sync="visible" :current-row.sync="currentRow" @success="getList()" />
    <Account v-if="visibles" :visible.sync="visibles" :current-row.sync="row" @success="getList()" />
  </div>
</template>
<script>
import { tableColor, labelHeigh } from '@/utils/common.js';
import Dialog from "./dialog";
import Account from "./account";
export default {
  components: { Dialog, Account },
  filters: {
    deptUsrListHandle: (list) => {
      const handleList = [];
      list.forEach(item => {
        if (item.deptName) handleList.push(item.deptName);
      });
      return handleList.join(",");
    },
    usrJobListHandle: (list) => {
      const handleList = [];
      list.forEach(item => {
        if (item.hospitalJobName) handleList.push(item.hospitalJobName);
      });
      return handleList.join(",");
    },
  },
  data() {
    return {
      value: '',
      input3: '',
      loading: false,
      visible: false,
      visibles: false,
      reveal: false,
      currentRow: {},
      tableData: [],
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 1,
      options: [{
        value: '选项1',
        label: '黄金糕',
      }],
      row: {},
      custQuery: '',
      tableColor,
      innerHeight: null,
      getAllDeptTreeList: [],
      getAllJobTreeList: [],
      searchForm: {},
      propsOption: {
        value: 'id',
        label: 'deptName',
        children: 'children',
        checkStrictly: true,
      },
      propsOptions: {
        value: 'id',
        label: 'jobName',
        children: 'children',
        checkStrictly: true,
      },
    };
  },
  mounted() {
    this.getList();
    this.getAllDeptTree();
    this.getAllJobTree();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    async getList(jobName) {
      if (jobName) {
        console.log(jobName, 'jobName');
      }
      const res = await this.$api['data/hospitalStaff/hisusr']({ ...this.queryParams, custQuery: this.custQuery, query: { ...this.searchForm }});
      if (res.code !== 200) return;
      this.tableData = res.data.result;
      this.total = res.data.total;
    },
    async getAllDeptTree() {
      const res = await this.$api['data/hospitalStaff/getAllDeptTree']();
      if (res.code !== 200) return;
      this.getAllDeptTreeList = res.data;
    },
    async getAllJobTree() {
      const res = await this.$api['data/hospitalStaff/getAllJobTree']();
      if (res.code !== 200) return;
      this.getAllJobTreeList = res.data;
    },
    handleAdd(bool) {
      this.visible = bool;
    },
    handlePaginationChange(pagination) {
      this.queryParams = { page: pagination.pageNum, pageSize: pagination.pageSize };
      this.getList();
    },
    handleEdit(row) {
      this.visible = true;
      this.currentRow = JSON.parse(JSON.stringify(row));
      if (this.currentRow.deptUsrList && this.currentRow.deptUsrList.length > 0) {
        // const list = [];
        const lists = this.currentRow.deptUsrList[0].deptId;
        // this.currentRow.deptUsrList.forEach(item => {
        // list.push(item.deptId);
        // });
        this.$set(this.currentRow, "deptUsr", lists);
      }
      if (this.currentRow.usrJobList && this.currentRow.usrJobList.length > 0) {
        // const list = [];
        const list = this.currentRow.usrJobList[0].hospitalJobId;
        // this.currentRow.usrJobList.forEach(item => {
        //   list.push(item.hospitalJobId);
        // });
        this.$set(this.currentRow, "usrJob", list);
      }
    },
    async handleDelete(row) {
      const confirmResult = await this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除');
      }
      this.buttonLoading = true;
      this.$api[`data/hospitalStaff/deleteHisusr`]({ id: row.id }).then(res => {
        if (res.code !== 200) return;
        this.msgSuccess('删除成功');
        this.getList();
      }).finally(() => (this.buttonLoading = false));
    },
    account(row) {
      this.row = row;
      this.visibles = true;
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .app-search .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 0px;
}
</style>
